<!-- 晨会管理附件上传 -->
<template>
  <div class="box" v-if="ShowOrHide">
    <el-upload :class="urlList.length == canUploadNum ? 'opIcon' : 'sanpao'" class="upload-demo" ref="upload" action="#"
      :file-list="SeeFileList" auto-upload accept=".word,.excel,.pdf,.xlsx,.docx" :multiple="false"
      :on-remove="removeImg" :http-request="submitUpload" list-type="text" :before-upload="beforeUpload" :show-file-list="showFileList">
      <el-button style="width: 200px;" :disabled="urlList.length == canUploadNum" slot="default" type="primary"
        plain><span>上传附件</span><span>最多上传{{ canUploadNum }}份</span></el-button>
    </el-upload>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      // 文件数组
      fileList: [],
      // 公网url数组
      urlList: [],
      //当前删除的序号
      index: '',
      // 负责回显的数组
      SeeFileList: [],
      ShowOrHide: true,
    }
  },
  props: {
    showFileList: { //是否显示要上传的文件列表
      type: Boolean,
      default: () => {
        return true
      }
    },
    id: { //要上传的id参数
      type: Number,
      default: () => {
        return 0
      }
    },
    canUploadNum: { //可以上传的个数
      type: Number,
      default: () => {
        return 3
      }
    },
    EchoFileList: { // 回显的列表
      type: Array,
      default: () => {
        return []
      }
    },
    uploadUrl: {
      type: String,
      default: () => {
        return ''
      }
    },

    uploadKey1: { //上传的参数key1
      type: String,
      default: () => {
        return 'files'
      }
    },
    uploadKey2: { //上传的参数key1
      type: String,
      default: () => {
        return 'id'
      }
    },
  },
  mounted() {
    this.urlList = []
    this.fileList = []
    if (this.EchoFileList.length > 0) {
      this.EchoFileList.forEach(el => {

        let lastindex = el.lastIndexOf("/") + 1
        let name = el.slice(lastindex)

        // 负责展示
        this.SeeFileList.push({
          name: name,
          url: el,
        })
        // 负责修改数据
        this.urlList.push(el)
        this.fileList.push(el)
      })
    }
  },
  methods: {
    beforeUpload(file) {
      console.log(file, 'file');
      // 判断是否含有特殊字符
      var pattern = /[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/; // 定义特殊字符的正则表达式模式
      if (pattern.test(file.name)) {
        this.$message.error('文件名称含有特殊字符,请修改后上传');
        return false
      }
      if (this.urlList.length > this.canUploadNum-1) {
        this.$message.error(`最多上传${this.canUploadNum}份附件`);
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error('附件大小不能超过 1MB!');
      }
      return isLt2M;
    },
    //上传文件
    async submitUpload(e) {

      console.log(e, '上传的值');
      let formData = new FormData()
      formData.append(`${this.uploadKey1}`, e.file)// 传文件
      formData.append(`${this.uploadKey2}`, this.id)// 传文件
      let res = await this.$api.ImgFile.upload(defaultUrl +this.uploadUrl, formData)
      console.log(res, '上传结果');
      if (res.data.code == 200) {
        this.urlList.push(res.data.data[0])  // 存返回的url
        this.fileList.push(e) //存file文件
        this.$emit('getFileList', this.urlList)
      } else {
        this.$message.error('上传失败');
        this.clear()
      }
    },
    //删除文件
    async removeImg(e) {
      console.log(this.urlList, this.fileList, e, '删除的文件');
      this.urlList.forEach((el, i) => {
        if (e.name.indexOf('/') > -1) {
          if (e.name == el) {
            this.index = i
          }
        } else {
          let lastindex = el.lastIndexOf("/") + 1
          let name = el.slice(lastindex)
          if (name == e.name) {
            this.index = i
          }
        }
      })
      console.log(`删除了第${this.index}个`);
      if (this.urlList[this.index] == undefined) {
        return
      }
      // 获取选中的图片的名字
      // let lastindex = this.urlList[this.index].lastIndexOf("/") + 1
      let params = {
        "filename": this.urlList[this.index]
      }

      this.$emit('deleteFileList', this.urlList[this.index])
      this.fileList.splice(this.index, 1)
      this.urlList.splice(this.index, 1)
      this.$emit('getFileList', this.urlList)
    },
    clear() {
      this.$refs.upload.clearFiles()
      this.urlList = []
      this.fileList = []
    },
    show() { //展示
      this.ShowOrHide = true
    },
    hide() { //隐藏
      this.ShowOrHide = false
    },
  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;

  /deep/ .upload-demo {

    &.opIcon {
      .el-upload--picture-card {
        display: none;
      }
    }
  }

  span {

    &:nth-child(1) {}

    &:nth-child(2) {
      margin-left: 15px;
      color: #87c2ff;
    }
  }
}
</style>